<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>WebSocket Test</title>
    </head>
    <body>
        <h2>WebSocket Test</h2>
        <div id="output"></div>
        <script type="text/javascript">
            var output = document.getElementById('output');

            function println(message) {
                const p = document.createElement('p');
                p.innerHTML = message;
                output.appendChild(p);
            }

            // Websocket echo server, provided from https://www.websocket.org/echo.html
            var targetUrl = 'wss://echo.websocket.org';
            var messageContent = 'Hello friends :^)';
            println('<span style="color: blue;">Connecting to:</span> ' + targetUrl);
            websocket = new WebSocket(targetUrl);
            websocket.onopen = function() {
                println('<span style="color: green;">Connected to:</span> ' + targetUrl);
                println('<span style="color: blue;">Sending Message:</span> ' + messageContent);
                websocket.send(messageContent);
            };
            websocket.onmessage = function(event) {
                println('<span style="color: green;">Received Response:</span> ' + event.data);
                println('<span style="color: blue;">Closing connection...</span> ');
                websocket.close();
            };
            websocket.onerror = function(evt) {
                println('<span style="color: red;">ERROR:</span> ' + evt.data);
            };
            websocket.onclose = function() {
                println('<span style="color: green;">Connection closed!</span>');
            };
          </script>
    </body>
</html>
